<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>报警分析</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/alarmanalysis.css">
    <!-- 引入第三方库 -->
    <script src="../lib/jquery.js"></script>
    <script src="../layui-v2.8.17/layui/layui.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <!-- 引入公共模块 -->
    <script src="../js/common.js"></script>
    <script src="../js/widgets.js"></script>
    <script src="../js/android-interface.js"></script>
    <!-- 引入模拟数据 -->
    <script src="../js/mock/mock-alarmanalysis-data.js"></script>
    <!-- 引入业务模块 -->
    <script src="../js/alarmanalysis.js"></script>
</head>
<body>
    <!-- 页面头部 -->
    <div class="common-header"></div>
    
    <!-- 主内容区 -->
    <div class="main-container">
        <!-- 选项卡 -->
        <div class="tab-container">
            <div class="tab-item active" data-tab="grain">粮情检测报警</div>
            <div class="tab-item" data-tab="gas">气体检测报警</div>
        </div>
        
        <!-- 粮情检测报警内容 -->
        <div class="tab-content" id="grain-content">
            <!-- 过滤器工具栏 -->
            <div class="toolbar">
                <div class="filter-group">
                    <label>时间范围:</label>
                    <select id="grain-time-filter">
                        <option value="today">今天</option>
                        <option value="week" selected>近7天</option>
                        <option value="month">近30天</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>报警类型:</label>
                    <select id="grain-type-filter">
                        <option value="all" selected>全部</option>
                        <option value="temperature">温度</option>
                        <option value="humidity">湿度</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>报警级别:</label>
                    <select id="grain-level-filter">
                        <option value="all" selected>全部</option>
                        <option value="high">高</option>
                        <option value="medium">中</option>
                        <option value="low">低</option>
                    </select>
                </div>
                <button id="refresh-grain-alarms" class="btn-refresh">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>
            </div>
            
            <!-- 报警列表 -->
            <div id="grain-alarm-list" class="alarm-list-container">
                <!-- 报警列表将通过JavaScript动态加载 -->
            </div>
            
            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info">共 <span id="grain-total-count">0</span> 条记录</div>
                <div id="grain-pagination" class="pagination-controls"></div>
            </div>
        </div>
        
        <!-- 气体检测报警内容 -->
        <div class="tab-content" id="gas-content" style="display: none;">
            <!-- 过滤器工具栏 -->
            <div class="toolbar">
                <div class="filter-group">
                    <label>时间范围:</label>
                    <select id="gas-time-filter">
                        <option value="today">今天</option>
                        <option value="week" selected>近7天</option>
                        <option value="month">近30天</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>气体类型:</label>
                    <select id="gas-type-filter">
                        <option value="all" selected>全部</option>
                        <option value="oxygen">氧气</option>
                        <option value="co2">二氧化碳</option>
                        <option value="ph3">磷化氢</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label>报警级别:</label>
                    <select id="gas-level-filter">
                        <option value="all" selected>全部</option>
                        <option value="high">高</option>
                        <option value="medium">中</option>
                        <option value="low">低</option>
                    </select>
                </div>
                <button id="refresh-gas-alarms" class="btn-refresh">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>
            </div>
            
            <!-- 报警列表 -->
            <div id="gas-alarm-list" class="alarm-list-container">
                <!-- 报警列表将通过JavaScript动态加载 -->
            </div>
            
            <!-- 分页控件 -->
            <div class="pagination-container">
                <div class="pagination-info">共 <span id="gas-total-count">0</span> 条记录</div>
                <div id="gas-pagination" class="pagination-controls"></div>
            </div>
        </div>
    </div>
    
 
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 设置页面标题
            initCommonHeader('报警分析', true);
            
            // 初始化报警分析模块
            if (typeof AlarmAnalysis !== 'undefined' && AlarmAnalysis.init) {
                AlarmAnalysis.init();
            }
        });
    </script>
</body>
</html>


